<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-shop"></i>
          订单管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-input
          v-model="search.mobile"
          placeholder="手机号"
          class="handle-input mr10"
        ></el-input>
        <el-input
          v-model="search.orderTradeId"
          placeholder="订单号"
          class="handle-input mr10"
          width="55"
        ></el-input>
        <el-input
          v-model="search.tradeGoodsName"
          placeholder="商品名称"
          class="handle-input mr10"
          width="55"
        ></el-input>
        <el-select
          class="handle-input mr10"
          v-model="search.expressStatus"
          placeholder="快递状态"
        >
          <el-option
            v-for="item in expressStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-select
          class="handle-input mr10"
          v-model="search.tradeStatus"
          placeholder="订单状态"
        >
          <el-option
            v-for="item in tradeStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        <el-date-picker
          v-model="search.createTime"
          type="datetimerange"
          format="YYYY-MM-DD HH:mm:ss"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </div>
      <div class="handle-box">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button type="primary" @click="showExport = true">导出</el-button>
        <el-button type="primary" @click="showAlldelivery = true"
          >批量发货</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <!-- <el-table-column type="selection" width="55" align="center"></el-table-column> -->
        <el-table-column
          prop="tradeGoodsName"
          :show-overflow-tooltip="true"
          label="商品名称"
        ></el-table-column>
        <el-table-column
          prop="orderTradeId"
          label="订单号"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tradeNumber"
          label="数量"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="standard"
          label="规格"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="sizes"
          label="尺码"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="model"
          label="型号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="mobile"
          label="手机号"
          align="center"
          width="120"
        ></el-table-column>
        <el-table-column
          prop="tradeMoney"
          label="总价"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="freight"
          label="运费"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="recipientsAddress"
          label="收货地址"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="expressOrder"
          label="快递单号"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column label="支付方式" width="100" align="center">
          <template #default="scope">
            <el-tag v-if="scope.row.payWay == '1'">支付宝</el-tag>
            <el-tag v-if="scope.row.payWay == '2'">微信</el-tag>
            <el-tag v-if="scope.row.payWay == '3'">衫德</el-tag>
            <el-tag v-if="scope.row.payWay == '4'">余额</el-tag>
            <el-tag v-else>汇聚</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center" width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.tradeStatus == '0'">待支付</el-tag>
            <el-tag v-else-if="scope.row.tradeStatus == '1'">待发货</el-tag>
            <el-tag v-else-if="scope.row.tradeStatus == '2'">待收货</el-tag>
            <el-tag v-else-if="scope.row.tradeStatus == '3'">已取消</el-tag>
            <el-tag v-else>已完成</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="payTime"
          label="支付时间"
          width="160"
          align="center"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column
          prop="tradeTime"
          label="创建时间"
          width="160"
          align="center"
          :formatter="dateFormat"
        ></el-table-column>
        <el-table-column label="操作" width="180" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-lx-attention"
              @click="handleCheak(scope.row)"
              >查看</el-button
            >
            <el-button
              type="text"
              @click="isdelivery(scope.row)"
              v-if="scope.row.expressStatus == 0"
              >发货</el-button
            >
            <el-button type="text" class="green" v-else>已发货</el-button>
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>
    <!-- 编辑弹出框 -->
    <el-dialog title="商品信息" v-model="showCheak" width="90%">
      <el-form
        ref="form"
        :model="list"
        label-width="130px"
        :disabled="isDisabled"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="商品名称">
              <el-input v-model="list.name"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="商品一级分类">
              <el-input v-model="list.commodityClassifyLevel1Name"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="规格">
              <el-input v-model="list.standard"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="库存">
              <el-input v-model="list.stock"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="详情">
          <Tinymce-editor
            :disabled="isDisabled"
            :value="list.contextDetails"
            @input="(res) => (list.contextDetails = res)"
          ></Tinymce-editor>
        </el-form-item>
        <el-row>
          <el-col :span="16">
            <el-form-item label="说明">
              <el-input
                type="textarea"
                placeholder="请输入内容"
                v-model="list.explains"
                show-word-limit
                :rows="8"
                resize="none"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="8">
            <el-form-item label="商品图片">
              <div class="crop-demo">
                <img
                  v-if="list.showPic"
                  :src="joinpic(list.showPic)"
                  class="pre-img"
                />
              </div>
            </el-form-item>
          </el-col>
          <el-col>
            <el-form-item label="商品详情图">
              <el-upload
                action=""
                list-type="picture-card"
                :on-preview="picPreview"
                :file-list="picList"
                ref="picClear"
                class="hide"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog v-model="dialogVisible">
                <img
                  width="100%"
                  :src="dialogImageUrl"
                  alt=""
                  class="picPreview"
                />
              </el-dialog>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-dialog>
    <!-- 导出框 -->
    <el-dialog title="导出" v-model="showExport" width="30%">
      <el-form ref="form" :model="eList" label-width="100px">
        <el-form-item label="创建时间范围">
          <el-date-picker
            v-model="eList.createTime"
            type="datetimerange"
            format="YYYY-MM-DD HH:mm:ss"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-radio-group v-model="eList.tradeStatus">
            <el-radio :label="0">待支付</el-radio>
            <el-radio :label="1">待发货</el-radio>
            <el-radio :label="2">待收货</el-radio>
            <el-radio :label="3">已取消</el-radio>
            <el-radio :label="4">已完成</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="手机号：">
          <el-input
            v-model="eList.mobile"
            placeholder="请填写手机号"
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showExport = false">取 消</el-button>
          <el-button type="primary" @click="orderExport">确 定</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 发货信息 -->
    <el-dialog title="发货信息" v-model="showDelivery" width="30%">
      <el-form ref="form" :model="addList" label-width="100px">
        <el-form-item label="收件人姓名">
          <el-input disabled v-model="addList.name"></el-input>
        </el-form-item>
        <el-form-item label="收件人手机号">
          <el-input disabled v-model="addList.mobile"></el-input>
        </el-form-item>
        <el-form-item label="收件地址">
          {{
            addList.province +
            addList.city +
            addList.district +
            " " +
            addList.address
          }}
        </el-form-item>
        <el-form-item label="收件人手机号">
          <el-input v-model="addList.mobile"></el-input>
        </el-form-item>
        <el-form-item label="快递单号">
          <el-input v-model="addList.expressOrder"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showDelivery = false">取 消</el-button>
          <el-button type="primary" @click="delivery">发 货</el-button>
        </span>
      </template>
    </el-dialog>
    <!-- 批量发货 -->
    <el-dialog title="发货信息" v-model="showAlldelivery" width="30%">
      <div class="crop-demo">
        <input
          class="crop-input"
          type="file"
          @change="setFile"
          :disabled="isDisabled"
        />
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showAlldelivery = false">取 消</el-button>
          <el-button type="primary" @click="allDelivery">发 货</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { orderList, orderCheck, orderEmit } from "../../api/zyMall";
import { api, apiEx, upload } from "@/api/index";
import { formatDate } from "../../common/data";
import TinymceEditor from "../../components/tinymce-editor";
import moment from "moment";
export default {
  inject: ["reload"],
  name: "basetable",
  components: {
    TinymceEditor,
  },
  data() {
    return {
      query: {
        parentid: "832cf97356bb4f5ea1d03a115992cd52",
        status: 100,
        pageNo: 1,
      },
      search: {
        createTime: null,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      showCheak: false,
      showExport: false,
      showDelivery: false,
      showAlldelivery: false,
      pageTotal: 0,
      form: {},
      list: {},
      eList: {
        createTime: null,
      },
      addList: {},
      createTime: null,
      expressStatus: [
        {
          value: 0,
          label: "未发货",
        },
        {
          value: 1,
          label: "已发货",
        },
      ],
      tradeStatus: [
        {
          value: 0,
          label: "待支付",
        },
        {
          value: 1,
          label: "待发货",
        },
        {
          value: 2,
          label: "待收货",
        },
        {
          value: 3,
          label: "已取消",
        },
      ],
      expressStatusText: "",
      tradeStatusText: "",
      picList: [],
      dialogVisible: false,
      allDeliveryUrl: "",
    };
  },
  created() {
    this.getData();
  },
  methods: {
    joinpic(item) {
      return `https://mall.xiyibaomall.com/imgs/${item}`;
    },

    // 时间戳转换
    dateFormat: function (row, column) {
      var date = row[column.property];
      if (date == undefined) {
        return "";
      }
      return moment(date).format("YYYY-MM-DD HH:mm:ss");
    },
    timeFormat(item) {
      return `${formatDate(new Date(item[0]), "yyyy-MM-dd hh:mm:ss")} - ${formatDate(new Date(item[1]), "yyyy-MM-dd hh:mm:ss")}`;
    },

    // 触发搜索按钮
    handleSearch() {
      if (this.search.createTime != null) {
        this.search.createTime = this.timeFormat(this.search.createTime);
      }
      this.getData();
    },

    // 获取列表信息
    getData() {
      orderList({
        limit: 10,
        offset: this.query.pageNo,
        user: this.search.mobile,
        expressStatus: this.search.expressStatus || "",
        createTime: this.search.createTime || "",
        orderTradeId: this.search.orderTradeId || "",
        tradeGoodsName: this.search.tradeGoodsName || "",
        tradeStatus: this.search.tradeStatus || "",
      }).then((res) => {
        this.tableData = res.data.rows;
        this.pageTotal = res.data.total;
      });
    },

    //导出
    orderExport() {
      this.showExport = false;
      if (this.eList.createTime != null) {
        this.eList.createTime = this.timeFormat(this.eList.createTime);
      }
      apiEx("/web/so/soe", this.eList).then((res) => {
        const blob = new Blob([res]); // 创建blob对象
        const fileName = "自营订单.xlsx";
        const elink = document.createElement("a"); // 创建的标签
        elink.download = fileName;
        elink.style.display = "none";
        elink.href = URL.createObjectURL(blob); // 创建url
        document.body.appendChild(elink); // 把 创建的标签追加到body里
        elink.click();
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 移除标签
        this.$message({
          message: "导出成功！！！",
          type: "success",
        });
        this.$refs.multipleTable.clearSelection();
      });
    },

    //查看商品信息
    handleCheak(row) {
      this.picList = [];
      this.showCheak = true;
      this.isDisabled = true;
      this.isChange = 0;
      orderCheck({ tradeGoods: row.tradeGoods }).then((res) => {
        this.picList.push({ name: "1", url: res.data.showDetails1 });
        this.picList.push({ name: "2", url: res.data.showDetails2 });
        this.picList.push({ name: "3", url: res.data.showDetails3 });
        this.list = res.data;
      });
    },

    setFile(file) {
      //上传图片
      let imgFile = file.target.files[0];
      let formData = new FormData(); //通过formdata上传
      formData.append("file", imgFile);
      upload(formData).then((res) => {
        this.allDeliveryUrl = res.data[0].fileName;
      });
    },

    allDelivery() {
      api("/web/so/pdo", {
        excelUrl: this.allDeliveryUrl,
      }).then((res) => {
        if (res.code === 2000) {
          this.addList = {};
          this.$message.success(res.message);
          this.reload();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    //显示发货框
    isdelivery(row) {
      this.showDelivery = true;
      api("web/address/gU", { id: row.addId }).then((res) => {
        this.addList = res.data;
        this.addList.deliveryId = row.id;
        // this.addList.expressOrder = row.expressOrder;
      });
    },

    //发货
    delivery() {
      orderEmit({
        expressOrder: this.addList.expressOrder,
        id: this.addList.deliveryId,
      }).then((res) => {
        if (res.code === 2000) {
          this.addList = {};
          this.$message.success(res.message);
          this.reload();
        } else {
          this.$message.error(res.message);
        }
      });
    },

    // 分页导航
    handlePageChange(val) {
      // this.$set(this.query, "pageIndex", val);
      this.query.pageNo = val;
      this.getData();
    },

    //预览大图
    picPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },

    // 删除操作
    handleDelete(row) {
      let data = JSON.parse(JSON.stringify(row));
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          api("/web/so/sc", {
            id: data.id,
          }).then((res) => {
            if (res.code === 2000) {
              this.$message.success(res.message);
              this.reload();
            } else {
              this.$message.error(res.message);
            }
          });
        })
        .catch(() => {});
    },
  },
};
</script>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 180px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.green {
  color: #23b654;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}

.crop-demo {
  .pre-img {
    height: 146px;
    background: #f8f8f8;
    border: 1px solid #eee;
  }
}

.picPreview {
  width: 100%;
}
</style>
<style>
.hide .el-upload--picture-card {
  display: none;
}
</style>
